<template>
  <div class="depart-container">
    <el-input
      v-model="filterText"
      placeholder="请输入部门名称进行搜索..."
      prefix-icon="el-icon-search"
      size="small"
    />
    <el-tree
      ref="tree"
      class="filter-tree"
      :data="list"
      :props="defaultProps"
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="primary"
            size="mini"
            class="btn"
            @click="() => handleCreate(data)"
          >
            添加部门
          </el-button>
          <el-button
            type="danger"
            size="mini"
            class="btn"
            @click="() => handleDelete(data)"
          >
            删除部门
          </el-button>
        </span>
      </span>
    </el-tree>
    <el-dialog
      title="添加部门"
      :visible.sync="dialogVisible"
      width="15%"
    >
      <div>
        <table :cellSpacing="8">
          <tr>
            <td><el-tag size="small">上级部门</el-tag></td>
            <td><el-input v-model="parentName" disabled size="mini" /></td>
          </tr>
          <tr>
            <td><el-tag size="small">部门名称</el-tag></td>
            <td><el-input v-model="row.name" size="mini" placeholder="请输入部门名称..." @keydown.enter.native="createConfirm" /></td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="createCancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="createConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetAll, Create, Delete } from '@/api/Sys/SysBasic/DepartManage'

export default {
  name: 'DepartManage',
  data() {
    return {
      filterText: '',
      list: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dialogVisible: false,
      row: {
        name: '',
        parentId: -1
      },
      parentName: ''
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.getAll()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    getAll() {
      GetAll().then((res) => {
        if (res) {
          this.list = res
        }
      })
    },
    handleCreate(data) {
      this.parentName = data.name
      this.row.parentId = data.id
      this.dialogVisible = true
    },
    createConfirm() {
      if (this.row.name) {
        Create(this.row).then((res) => {
          if (res) {
            this.addRowToList(this.list, res.object)
            this.dialogVisible = false
            this.initDate()
          }
        })
      } else {
        this.$message.warning('部门名称不可以为空!')
      }
    },
    addRowToList(list, row) {
      for (let i = 0; i < list.length; i++) {
        const depart = list[i]
        if (depart.id === row.parentId) {
          depart.children = depart.children.concat(row)
          return
        } else {
          this.addRowToList(depart.children, row)
        }
      }
    },
    createCancel() {
      this.dialogVisible = false
      this.initDate()
    },
    initDate() {
      this.row.name = ''
      this.row.parentId = -1
      this.parentName = ''
    },
    handleDelete(data) {
      if (data.isParent) {
        this.$message.error('该部门下有子部门，不可以删除！')
      } else {
        this.$confirm('此操作将永久删除【' + data.name + '】部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          Delete(data.id).then((res) => {
            if (res) {
              this.removeRowToList(this.list, data.id)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    removeRowToList(list, id) {
      for (let i = 0; i < list.length; i++) {
        const depart = list[i]
        if (depart.id === id) {
          list.splice(i, 1)
          return
        } else {
          this.removeRowToList(depart.children, id)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.depart-container {
  width: 500px;

  .filter-tree {
    margin-top: 10px;

    .custom-tree-node {
      display: flex;
      justify-content: space-between;
      width: 100%;

      .btn {
        padding: 2px;
      }
    }
  }
}
</style>

<style scoped>
.depart-container /deep/ .el-dialog__body {
  padding: 0 20px;
}
</style>
